<template>
  <div class="detail-form">
    <el-form
      ref="secForm"
      :model="toForm"
      :size="toFormConf.formSize || 'medium'"
      :label-position="toFormConf.labelPosition || 'right'"
      :label-width="toFormConf.labelWidth ? toFormConf.labelWidth + 'px' : '200' + 'px'"
    >
      <div class="fieldSet" v-for="(item, index) in toGroupLayouts" :key="index">
        <legend class="layout-title">{{ item.componentName }}</legend>

        <el-row :gutter="0" style="padding-right: 10px; padding-left: 10px">
          <el-col :span="col.span" v-for="(col, colIndex) in item.children" :key="colIndex">
            <!-- (一)根据类型做相应展示 -->
            <el-form-item class="labelUnwrap" :label="col.label + '：'" :prop="col.basicCode">
              <span slot="label">
                <el-tooltip :content="col.label">
                  <span style="font-family: Arial">{{ col.label }}</span>
                </el-tooltip>
              </span>
              <!-- **多选等新增和修改改完后设计 -->
              <!--单选select-->
              <el-select
                v-if="col.formTypeName == 'selectsingle'"
                disabled
                v-model="toForm[col.basicCode]"
                :placeholder="'请选择' + col.label"
              >
                <el-option
                  v-for="item in col.dictList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
              <!--多选select-->
              <el-select
                v-else-if="col.formTypeName == 'selectmulti'"
                disabled
                v-model="toForm[col.basicCode]"
                multiple
                :placeholder="'请选择' + col.label"
              >
                <el-option
                  v-for="item in col.dictList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
              <el-checkbox-group v-else-if="col.formTypeName == 'checkbox'" disabled v-model="toForm[col.basicCode]">
                <el-checkbox v-for="item in col.dictList" :label="item.dictValue">{{ item.dictLabel }}</el-checkbox>
              </el-checkbox-group>
              <!--日期-->
              <el-date-picker
                v-else-if="col.formTypeName == 'date'"
                type="date"
                readonly
                v-model="toForm[col.basicCode]"
              >
              </el-date-picker>
              <!--日期时间-->
              <el-date-picker
                v-else-if="col.formTypeName === 'datetime'"
                type="datetime"
                readonly
                v-model="toForm[col.basicCode]"
              >
              </el-date-picker>
              <!--日期时间-->
              <div v-else-if="col.formTypeName === 'formula'">
                <!--                  <el- -->
                <el-button size="mini" @click="draw">绘图</el-button>
              </div>

              <!-- 上传是带分页得 -->
              <UploadShowTable
                v-else-if="col.formTypeName == 'upload'"
                :col="col"
                :partId="toForm['_id']"
                :updateDate="toForm['_UPDATETIME']"
                :fieldId="col.fieldId"
              ></UploadShowTable>

              <el-radio-group v-else-if="col.formTypeName == 'radio'" disabled v-model="toForm[col.basicCode]">
                <el-radio v-for="item in col.dictList" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
              </el-radio-group>
              <!-- 复杂属性行列少正常展示、多时以弹窗的形式展示-->
              <div v-else-if="col.dataExtend == true">
                <ForShowDataExtendTable
                  :col="col"
                  :partId="toForm['_id']"
                  :updateDate="toForm['_UPDATETIME']"
                ></ForShowDataExtendTable>
              </div>
              <!-- 颜色 -->
              <el-color-picker v-else-if="col.formTypeName == 'color'" v-model="toForm[col.basicCode]" disabled>
              </el-color-picker>
              <!--富文本-->
              <editor
                v-else-if="col.formTypeName == 'richtext'"
                :min-height="192"
                :readOnly="true"
                v-model="toForm[col.basicCode]"
              />
              <pre class="pre_class" v-else-if="col.formTypeName == 'textarea'">{{ toForm[col.basicCode] }}</pre>

              <el-tree
                class="single-tree"
                v-else-if="col.formTypeName === 'selectztree'"
                :ref="col.basicCode"
                :check-on-click-node="true"
                :data="col.dictList"
                :default-checked-keys="[toForm[col.basicCode]]"
                show-checkbox
                node-key="dictValue"
                :props="{
                  children: 'children',
                  label: 'dictLabel',
                  id: 'dictValue',
                  disabled: () => true
                }"
              >
              </el-tree>

              <el-tree
                v-else-if="col.formTypeName === 'selectztreemulti'"
                :ref="col.basicCode"
                :check-on-click-node="true"
                :data="col.dictList"
                show-checkbox
                :default-checked-keys="toForm[col.basicCode]"
                node-key="dictValue"
                :props="{
                  children: 'children',
                  label: 'dictLabel',
                  id: 'dictValue',
                  disabled: () => true
                }"
              >
              </el-tree>

              <UploadFolder
                v-else-if="col.formTypeName == 'upload_folder'"
                :col="col"
                :task-id="taskId"
                :disabled="true"
              />

              <el-input v-else readonly v-model="toForm[col.basicCode]"></el-input>
            </el-form-item>
            <!-- <el-divider></el-divider> -->
          </el-col>
        </el-row>
      </div>

      <div class="fieldSet" v-if="toGroupOutLayouts != null && toGroupOutLayouts.length > 0">
        <el-row
          v-if="toGroupOutLayouts != null && toGroupOutLayouts.length > 0"
          :span="24"
          style="padding-right: 10px; padding-left: 10px"
        >
          <legend class="layout-title">其它信息</legend>

          <el-col :span="col.span" v-for="(col, idx) in toGroupOutLayouts" :key="idx">
            <!-- (二)根据类型做相应展示********(同上复制) -->
            <el-form-item class="labelUnwrap" :label="col.label + '：'" :prop="col.basicCode">
              <span slot="label">
                <el-tooltip :content="col.label">
                  <span>{{ col.label }}</span>
                </el-tooltip>
              </span>
              <!-- **多选等新增和修改改完后设计 -->
              <!--单选select-->
              <el-select
                v-if="col.formTypeName == 'selectsingle'"
                disabled
                v-model="toForm[col.basicCode]"
                :placeholder="'请选择' + col.label"
              >
                <el-option
                  v-for="item in col.dictList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
              <!--多选select-->
              <el-select
                v-else-if="col.formTypeName == 'selectmulti'"
                disabled
                v-model="toForm[col.basicCode]"
                multiple
                :placeholder="'请选择' + col.label"
              >
                <el-option
                  v-for="item in col.dictList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
              <el-checkbox-group v-else-if="col.formTypeName == 'checkbox'" disabled v-model="toForm[col.basicCode]">
                <el-checkbox v-for="item in col.dictList" :label="item.dictValue">{{ item.dictLabel }}</el-checkbox>
              </el-checkbox-group>
              <!--日期-->
              <el-date-picker
                v-else-if="col.formTypeName == 'date'"
                type="date"
                readonly
                v-model="toForm[col.basicCode]"
              >
              </el-date-picker>
              <!--日期时间-->
              <el-date-picker
                v-else-if="col.formTypeName === 'datetime'"
                type="datetime"
                readonly
                v-model="toForm[col.basicCode]"
              >
              </el-date-picker>
              <!-- 上传是带分页得 -->
              <UploadShowTable
                v-else-if="col.formTypeName == 'upload'"
                :col="col"
                :partId="toForm['_id']"
                :updateDate="toForm['_UPDATETIME']"
                :fieldId="col.fieldId"
              ></UploadShowTable>
              <el-radio-group v-else-if="col.formTypeName == 'radio'" disabled v-model="toForm[col.basicCode]">
                <el-radio v-for="item in col.dictList" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
              </el-radio-group>
              <!-- 复杂属性行列少正常展示、多时以弹窗的形式展示-->
              <div v-else-if="col.dataExtend == true">
                <ForShowDataExtendTable
                  :col="col"
                  :partId="toForm['_id']"
                  :updateDate="toForm['_UPDATETIME']"
                ></ForShowDataExtendTable>
              </div>
              <!-- 颜色 -->
              <el-color-picker v-else-if="col.formTypeName == 'color'" v-model="toForm[col.basicCode]" disabled>
              </el-color-picker>
              <!--富文本-->
              <editor
                v-else-if="col.formTypeName == 'richtext'"
                :min-height="192"
                :readOnly="true"
                v-model="toForm[col.basicCode]"
              />
              <pre class="pre_class" v-else-if="col.formTypeName == 'textarea'">{{ toForm[col.basicCode] }}</pre>

              <UploadFolder
                v-else-if="col.formTypeName == 'upload_folder'"
                :col="col"
                :task-id="taskId"
                :disabled="true"
              />

              <el-tree
                class="single-tree"
                v-else-if="col.formTypeName === 'selectztree'"
                :ref="col.basicCode"
                :check-on-click-node="true"
                :data="col.dictList"
                :default-checked-keys="[toForm[col.basicCode]]"
                show-checkbox
                node-key="dictValue"
                :props="{
                  children: 'children',
                  label: 'dictLabel',
                  id: 'dictValue',
                  disabled: () => true
                }"
              >
              </el-tree>

              <el-tree
                v-else-if="col.formTypeName === 'selectztreemulti'"
                :ref="col.basicCode"
                :check-on-click-node="true"
                :data="col.dictList"
                show-checkbox
                :default-checked-keys="toForm[col.basicCode]"
                node-key="dictValue"
                :props="{
                  children: 'children',
                  label: 'dictLabel',
                  id: 'dictValue',
                  disabled: () => true
                }"
              >
              </el-tree>

              <el-input v-else readonly v-model="toForm[col.basicCode]"></el-input>

              <!-- {{ toForm }} -->
            </el-form-item>
            <!-- <el-divider></el-divider> -->
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import UploadShowTable from './UploadShowTable'
import ForShowDataExtendTable from './ForShowDataExtendTable'
import UploadFolder from './UploadFolder'
export default {
  name: 'DetailForm',
  components: {
    UploadShowTable,
    ForShowDataExtendTable,
    UploadFolder
  },
  props: {
    toForm: {
      type: Object,
      required: true,
      default: () => {}
    },
    toGroupLayouts: {
      type: Array,
      default: null
    },
    toGroupOutLayouts: {
      type: Array,
      default: null
    },
    toFormConf: {
      type: Object,
      default: null
    },
    taskId: {
      type: String,
      default: ''
    },
    modelId: {
      type: String,
      default: ''
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.detail-form {
  .title-item {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    padding-left: 8px;
    position: relative;
    display: flex;
    align-items: center;
    &::before {
      width: 4px;
      height: 60%;
      background-color: #1890ff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      display: block;
      content: '';
      border-radius: 4px;
    }
  }
}

.fieldSet {
  /* position: relative; */
  margin-bottom: 21px;
  padding: 5px;
  border: 1px #ededed solid;
  border-radius: 4px;
  display: block;
  box-shadow: rgba(99, 99, 99, 0.2) 2px 2px 5px 0px;
}
.layout-title {
  display: block;
  position: relative;
  margin-top: -15px;
  background-color: white;
  width: fit-content;
  margin-left: 20px;
  margin-bottom: 5px;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: inherit;
  color: #077ce9;
  border: 0;
}
</style>
